window.onload = function () {
	const canvas = document.querySelector('canvas');
	const width = window.innerWidth;
	const height = window.innerHeight;
	canvas.width = width;
	canvas.height = height;
	const ctx = canvas.getContext('2d');
	let circles = [], images=[];

// const imgSrc= [{src:
// "S26qtkq.png",
// width: 150,
// height: 120
// },
// {src:"EPT8xU0.png",
// width: 120,
// height: 150
// },
// {
// src:"6ECgLDP.png",
// width: 160,
// height: 100
// }
// ];
// let imgWidth, imgHeight;

	
// const ImgObj = function () {
//    this.img = new Image();
// 	 let idx = Math.floor(Math.random() * 3);
// 	 	this.img.src = imgSrc[idx].src;
// 		 this.width = imgSrc[idx].width;
// 			this.height = imgSrc[idx].height;
// 		 this.x = Math.random()*(width - this.width*2) + this.width;
// 			this.y = Math.random()*(height-this.height) + this.height;
// 	}	



// ImgObj.prototype.draw = function() {
// ctx.drawImage(this.img,this.x,this.y,this.width,this.height);	
// }

// ImgObj.prototype.update = function () {
// 	 this.y = this.y < -120 ? height : this.y - 0.25;
// 		this.x = this.x < -150	? width : this.x-0.5;
// }


	
   
	const getRandomColor = function() {
		const colors= ['rgba(222, 30, 30, 1)', '#398DA7', '#84CBDD'];
		return colors[Math.floor(Math.random() * colors.length)];
	}

	const Circle = function() {
		this.r = Math.random()*25 + 40;	
		this.x = Math.random()*(window.innerWidth - this.r * 2) + this.r + 200;
		this.y = Math.random()*(window.innerHeight - this.r * 2) + this.r + 200;
		
		this.dy = -1;
		this.dx = (Math.random() - 0.5) * 2;
		this.color = `rgba(220, 34, 33, 0.65)`;
	}


	Circle.prototype.draw = function () {
		ctx.beginPath();
		ctx.arc(this.x,this.y,this.r,0, Math.PI * 8,true);
		//ctx.stroke();

		//创建径向渐变
		// var radial =  ctx.createRadialGradient(500, 300, 0, 500, 300, 300); 
	 //    radial.addColorStop(0.3, '#e9242c');
	 //    radial.addColorStop(0.2, '#e9242c');
	 //    radial.addColorStop(0.1, '#e9242c');
	 //    ctx.fillStyle = radial;

		ctx.fillStyle=this.color;

		ctx.fill();
	}

	Circle.prototype.update = function () {
		 this.y = this.y < 0 ? height : this.y +this.dy;
			this.x = this.x > window.innerWidth	? this.r: this.x+this.dx;
		
	}
		
		

	const animate = function() {
			requestAnimationFrame(animate);
			ctx.clearRect(0,0,window.innerWidth, window.innerHeight);
		
			circles.map(c=>{
				c.update();
				c.draw();		
			})	 
		
			// images.map(image => {
			// 	image.update();
	  // 	image.draw();	
			// })	
			
		
	 	
	}

	circles = Array(8).fill(0).map(x => new Circle());  
	//const image = new ImgObj();
	// images	= Array(10).fill(0).map(x => new ImgObj());	
	animate();
	
}